<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
<style>
        div {
            width: 100px;
            height: 100px;
            /*to top*/
/*            background: linear-gradient(to top, orange, blue);
            background: -webkit-linear-gradient(to top, orange, blue); */ /*-webkit-*/

            /*to bottom*/
            /* background: linear-gradient(to bottom, orange, blue); */
            /*background: -webkit-linear-gradient(to bottom, orange, blue);*/

            /*to left*/
           /* background: linear-gradient(to left, orange, blue); */
            /*background: -webkit-linear-gradient(to left, orange, blue);*/

            /*to right*/
            background: linear-gradient(to right, orange, blue);
            /*background: -webkit-linear-gradient(to right, orange, blue);*/

            /*to top left*/
           /* background: linear-gradient(to top left, orange, blue); */
            /*background: -webkit-linear-gradient(to top left, orange, blue);*/

            /*to top right*/
            /* background: linear-gradient(to top right, orange, blue); */
            /*background: -webkit-linear-gradient(to top right, orange, blue);*/

            /*to bottom left*/
            /* background: linear-gradient(to bottom left, orange, blue); */
            /*background: -webkit-linear-gradient(to bottom left, orange, blue);*/

            /*to bottom right*/
            /* background: linear-gradient(to bottom right, orange, blue); */
            /*background: -webkit-linear-gradient(to bottom right, orange, blue);*/

        }
    </style>
</head>
<body>
<div></div>
</body>
</html>